<!--  -->
<template>
  <div class="ly-login-bg" v-if="showLogin">
  
    <div class="ly-login" v-if="isUser">
      <div class="ly-cont">
        <div class="ly-title">
          登录
          <img @click="closeLogin" class="ly-close" src="@/assets/img/icon_close.png" />
        </div>
        <ul class="ly-list">
          <li>
            <img src="@/assets/img/icon_nick.png" />
            <input type="number" placeholder="请输入手机号码" v-model="login.phoneNumber" maxlength="11" />
          </li>
          <li>
            <img src="@/assets/img/icon_password.png" />
            <input type="text" placeholder="请输入验证码" class="ly-input" v-model="login.verifyCode" />
            <span @click="getCode" class="ly-code">{{code}}</span>
          </li>
        </ul>
        <div class="ly-btn" @click="submit">立即登录</div>
        <p class="ly-error">{{message}}</p>
      </div>
    </div>
    <div class="ly-login ly-bind" v-if="isBind">
      <div class="ly-cont">
        <div class="ly-title">
          绑定用户信息
          <img @click="closeLogin" class="ly-close" src="@/assets/img/icon_close.png" />
        </div>
        <ul class="ly-list">
          <li>
            <img src="@/assets/img/icon_nick.png" />
            {{bind.phoneNumber}}
          </li>
          <li>
            <img src="@/assets/img/icon_password.png" />
            <input type="text" placeholder="请输入公司名称" v-model="bind.companyName" />
          </li>
          <li>
            <img src="@/assets/img/icon_password.png" />
            <input type="text" placeholder="请输入联系人，必填" v-model="bind.linkman" required="required"/>
          </li>
          <li>
            <img src="@/assets/img/icon_password.png" />
            <input type="text" placeholder="请输入联系邮箱" v-model="bind.email" />
          </li>
          <li>
            <img src="@/assets/img/icon_password.png" />
            <input type="text" placeholder="请输入联系QQ" v-model="bind.qq" />
          </li>
          <li>
            <img src="@/assets/img/icon_password.png" />
            <input type="text" placeholder="请输入专属顾问" v-model="bind.counselor" />
          </li>
        </ul>
        <div class="ly-btn" @click="bindUserInfo">立即绑定</div>
        <p class="ly-error">{{message}}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { verifyCode, setLogin, bind } from "@/api/info";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      login: {
        phoneNumber: "",
        verifyCode: ""
      },
      bind: {
        phoneNumber: ""
      },
      time: 60,
      code: "获取验证码",
      message: "",
      isUser: true,
      isBind: false
    };
  },
  //监听属性 类似于data概念
  computed: {
    ...mapGetters(["showLogin"])
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 倒计时
    getCode() {
      let vm = this,
        index = "";
      if (vm.time !== 60) {
        return;
      }
      if (vm.verifyPhone(vm.login.phoneNumber)) {
        --vm.time;
        vm.code = vm.time + "秒";
        vm.getCodeNumber(vm.login.phoneNumber);
        index = setInterval(() => {
          --vm.time;
          vm.code = vm.time + "秒";
          if (vm.time < 1) {
            vm.code = "获取验证码";
            vm.time = 60;
            clearInterval(index);
          }
        }, 1000);
      }
    },
    // 获取验证码 接口
    getCodeNumber(val) {
      let data = {
        phoneNumber: val
      };
      verifyCode(data).then(response => {
        console.log(response);
      });
    },
    verifyPhone(data) {
      this.message = "";
      if (!data) {
        this.message = "请输入手机号码";
        return false;
      }
      if (!/^1[3456789]\d{9}$/.test(data)) {
        this.message = "请输入正确的手机号码";
        return false;
      }
      return true;
    },
    verifyEmail(data) {
      this.message = "";
      if (!data) {
        this.message = "请输入邮箱";
        return false;
      }
      if (
        !/^([A-Za-z0-9_\-\.\u4e00-\u9fa5])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,8})$/.test(
          data
        )
      ) {
        this.message = "请输入正确的邮箱号";
        return false;
      }
      return true;
    },
    // 关闭登录框
    closeLogin() {
      this.$store.commit("updateShowLoginData", false);
    },
    // 登录
    submit() {
      let data = this.login,
        vm = this;
      if (vm.verifyPhone(vm.login.phoneNumber) && vm.login.verifyCode) {
        setLogin(data).then(response => {
          console.log(response);
          if (response.code === "0000") {
            vm.isUser = false;
            vm.isBind = false;
            vm.bind.phoneNumber = response.data;
            console.log(vm.bind.phoneNumber);
            vm.$store.commit("updateShowLoginData", false);
            vm.$store.commit(
              "updateUserInfoData",
              JSON.stringify(response.data)
            );
             vm.$Message.success('登录成功');
          } else if (response.code == "210") {
            vm.bind.phoneNumber = response.msg;
            vm.isUser = false;
            vm.isBind = true;
            //  vm.$store.commit("updateShowLoginData", true);
          } else {
            //  vm.isUser = true;
            vm.$Message.success(response.msg);
          }
        });
      }
    },
    // 绑定
    bindUserInfo() {
      let vm = this,
        data = vm.bind;
      if (vm.verifyPhone(vm.bind.phoneNumber) && vm.bind.linkman) {
        bind(data).then(response => {
          console.log(response);
          if (response.code === "0000") {
            vm.$Message.success("登录成功");
            vm.$store.commit("updateShowLoginData", false);
            vm.isUser = false;
            vm.isBind = false;
            vm.$store.commit("updateShowLoginData", false);
            vm.$store.commit(
              "updateUserInfoData",
              JSON.stringify(response.data)
            );
            // vm.isUser = true;
          } else {
            vm.$Message.success(response.msg);
          }
        });
      }
    },
    init(type) {
      if (type) {
        this.login.phoneNumber = "";
        this.login.verifyCode = "";
      }
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {}
};
</script>
<style lang='scss' scoped>
.ly-login-bg {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 9999999;

  .ly-login {
    width: 500px;
    height: 380px;
    position: absolute;
    background: #fff;
    border-radius: 20px;
    top: 50%;
    left: 50%;
    margin-top: -160px;
    margin-left: -250px;
    z-index: 22;
    padding: 50px 50px 0;

    &.ly-bind {
      height: 623px;
      margin-top: -290px;
    }

    .ly-cont {
      position: relative;

      .ly-close {
        position: absolute;
        cursor: pointer;
        top: -40px;
        right: -40px;
        width: 40px;
        height: 40px;

        img {
          width: 100%;
        }
      }

      .ly-title {
        width: 100%;
        line-height: 40px;
        font-size: 24px;
        text-align: center;
      }

      .ly-error {
        color: #ff0000;
        text-align: center;
        font-size: 12px;
        line-height: 30px;
        margin-top: 10px;
      }

      .ly-btn {
        width: 100%;
        line-height: 50px;
        height: 50px;
        border-radius: 5px;
        background: #0767f2;
        color: #fff;
        font-size: 16px;
        text-align: center;
        cursor: pointer;
      }

      .ly-list {
        width: 100%;
        margin: 20px 0;

        li {
          line-height: 50px;
          border: 1px solid #e5e5e5;
          border-radius: 4px;
          padding-left: 50px;
          position: relative;
          margin-bottom: 20px;

          img {
            position: absolute;
            top: 0;
            left: 0;
            width: 50px;
            height: 50px;
            padding: 12px;
          }

          input {
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            border: none;
            background: none;
            width: 100%;
          }

          .ly-code {
            width: 100px;
            height: 30px;
            line-height: 30px;
            position: absolute;
            top: 10px;
            right: 10px;
            z-index: 3;
            border-radius: 20px;
            border: 1px solid #0767f2;
            text-align: center;
            cursor: pointer;
            font-size: 12px;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 780px) {
  .ly-login-bg {
    .ly-login {
      width: 100%;
      left: 0;
      margin-left: 0;
    }
  }
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}

/* chrome */
input[type="number"] {
  -moz-appearance: textfield; /* firefox */
}
</style>
